Mostrar y ocultar contraseña usando JavaScript
Como parte de nuestro curso de JavaScript te mostraremos como mostrar y ocultar la contraseña en un formulario de acceso.
Mientras llenas un formulario, llega una situación en la que escribimos una contraseña y queremos ver lo que hemos escrito hasta ahora. Esto es especialmente útil si tenemos dudas sobre la escritura correcta. Para ver eso, hay una casilla de verificación haciendo clic en que hace que los caracteres sean visibles. Y esta misma casilla oculta la contraseña escrita.
En esta publicación, esta característica, es decir, alternar la visibilidad de la contraseña se implementa mediante JavaScript.
Algoritmo para ocultar y mostrar Contraseña
1) Crea un formulario HTML que contenga un campo de entrada de tipo contraseña.
2) Crea una casilla de verificación que será responsable de alternar la visibilidad del texto.
3) Crea una función que responda para alternar cuando un usuario hace clic en la casilla de verificación.
Ejemplos:
La contraseña es hola6611. Entonces, al escribir se mostrará así *******. Y al hacer clic en la casilla de verificación mostrará los caracteres: hola6611. Este es en código correspondiete en el documento HTML.
<!DOCTYPE html>
<html>
<body>
<b><p>Click on the checkbox to show
or hide password: </p></b>
<b>Password</b>: <input type="password"
value="hola6611" id="typepass">
<input type="checkbox" onclick="Toggle()">
<b>Show Password</b>
<script>
// Change the type of input to password or text
function Toggle() {
var temp = document.getElementById("typepass");
if (temp.type === "password") {
temp.type = "text";
}
else {
temp.type = "password";
}
}
</script>
</body>
</html>
Con este código logras ocultar y mostrar la contraseña. Por supuesto, lo puedes usar para ocultar cualquier otro elemento de tu página web. En próximas notas seguiremos hablando mas de otros usos de JavaScript en el desarrollo y diseño de sitios web. Por el momento te informamos que seguiremos trabajando en nuestro curso de PHP y el curso de C#. Esperamos que te sea útil.
